import React, { ReactElement } from 'react';
import { Text, TextProps } from 'react-native';
import { isIOS } from '../../constant';
import { beeNumber } from '../../constant/font';

type Children = ReactElement | null | string | number;

interface PharmacyNumberText extends TextProps {
  children: Children[] | Children;
}

export default (props: PharmacyNumberText): ReactElement => {
  const { style, children } = props;

  let pharmacyChildren = children instanceof Array ? children : [children];
  pharmacyChildren = pharmacyChildren.map(
    (item): Children => {
      if (typeof item === 'string' || typeof item === 'number') {
        const values = `${item}`.split('');
        return values
          .map((value): any => {
            const code = beeNumber[`${value}`];
            if (code) {
              return String.fromCharCode(code);
            }
            return value;
          })
          .join('');
      }
      return item;
    }
  );

  let textStyle = style instanceof Array ? style : [style];
  textStyle = [
    { letterSpacing: 2 },
    ...textStyle,
    { fontFamily: isIOS ? 'icomoon' : 'bee' }
  ];
  return (
    <Text {...props} style={textStyle}>
      {pharmacyChildren}
    </Text>
  );
};
